<template>
	<view>
		<view v-if="isLogin">
			<view class="head-container">
				<image :src="avatar" mode="aspectFill" class="img-avatar"></image>
				<view class="info-container">
					<view class="nick-container">
						<text class="txt-nick">{{nickName + "-[" + typeNames[type-1] + "]"}}</text>
						<image :src="badges[type-1]" mode="widthFix" class="img-badge"></image>
					</view>
					<text class="txt-email">{{userName + ":" + email}}</text>
				</view>
			</view><!--头部视图-->
			<text class="iconfont icon-dianji ic-logout" @click="clickLogout"></text>
			<view class="data-container">
				<view class="data-title" @click="clickSwitch(0)">
					<text class="data-title-name">我赞过的{{goodCount}}个博客</text>
					<text
						:class="status[0].visible?'iconfont icon-ic_down2 ic-arrow':'iconfont icon-ic_down2 ic-arrow'"></text>
				</view>
				<scroll-view v-if="status[0].visible" scroll-x class="scroll-scroll" @scrolltolower="getGoodBlogs">
					<view class="scroll-item" v-for="(blog,index) in goodBlogs" :key="blog.id"
						@click="clickGoBlog(blog.id)">
						<image :src="blog.picture" mode="aspectFill"></image>
						<text>{{blog.title}}</text>
					</view>
				</scroll-view>
			</view><!--数据1视图-->
			<view class="data-container">
				<view class="data-title" @click="clickSwitch(1)">
					<text class="data-title-name">我管理的{{categories.length}}个类别数据</text>
					<text
						:class="status[1].visible?'iconfont icon-send-s ic-arrow':'iconfont icon-fangwenliang ic-arrow'"></text>
				</view>
				<view v-if="status[1].visible" class="category-container">
					<view class="category-item" v-for="(c,index) in categories" :key="c.id">
						<text class="category-name" @click="clickUpdate(c.id, c.name)">{{c.name}}</text>
						<text :class="c.count == 0?'category-del':'category-num'"
							@click="c.count==0?clickDelete(c.id, c.name):''">{{c.count == 0 ?'X': c.count}}</text>
					</view>
					<view class="category-item">
						<text class="iconfont icon-tianjia ic-add" @click="clickAdd"></text>
					</view>
				</view>
			</view><!--数据2视图-->
		</view>
		<login-dailog ref="login" @after="afterLogin"></login-dailog>
		<dialog-shell ref="shell_add" title="添加新类别" @confirm="confirmAdd">
			<view style="margin: 10rpx;">
				<input type="text" placeholder="请输入新名称" focus style="padding-left: 15rpx;" @input="inputGet" />
			</view>
		</dialog-shell>
		<dialog-shell ref="shell_update" title="更新类别名称" @confirm="confirmUpdate">
			<view style="margin: 10rpx;">
				<input type="text" :value="oldValue" placeholder="请输入新名称" focus style="padding-left: 15rpx;"
					@input="inputGet" />
			</view>
		</dialog-shell>
	</view>
</template>

<script>
	let current = 0
	let size = 2
	let app = getApp()
	let goodIds = []
	let newName = ""
	let updateId = ""
	export default {
		data() {
			return {
				isLogin: false,
				avatar: this.$params.host + app.globalData.avatar,
				userName: app.globalData.userName,
				nickName: app.globalData.nickName,
				email: app.globalData.email,
				typeNames: ["管理员", "认证博主", "博客会员"],
				badges: ["../../static/badge0.png", "../../static/badge1.png",
					"../../static/badge2.png"
				],
				type: app.globalData.type,
				goodCount: -1,
				status: [{
					visible: false
				}, {
					visible: false
				}, {
					visible: false
				}], //单独的布尔值可直接在页面使用，但值数组无法渲染页面，数据元素必须为对象
				goodBlogs: [],
				categories: [{
					"id": "dfafdafdf",
					"name": "政治评论",
					"count": "5"
				}, {
					"id": "aaaaaa",
					"name": "电子信息",
					"count": "0"
				}],
				oldValue: ""
			}
		},
		mounted() {
			if (!this.isLogin) {
				this.$refs.login.show()
			}
		},
		onload() {
			this.getLocalGood()
		},
		onShow() {
			if (!this.isLogin) {
				return
			}
			this.loadData()
		},
		methods: {
			getLocalGood() {
				let ids = uni.getStorageSync(this.$params.key_good_ids)
				if (ids) {
					goodIds = ids
				}
				this.goodCount = goodIds.length
				if (this.goodCount < size) {
					size = this.goodCount
				}
			},
			getGoodBlogs() {
				if (this.goodCount > 0 && this.goodBlogs.length == this.goodCount) {
					return
				}
				let url = this.$params.host + this.$params.action_top_blogs + goodIds[current++]
				this.$req.get(url, res => {
					//console.log(res);
					let blog = res.data.data
					blog.picture = this.$params.host + blog.picture
					this.goodBlogs.push(blog)

				})
			},
			loadData() {
				current = 0
				this.goodBlogs = []
				this.goodCount = -1
				this.getLocalGood()
				for (let i = 0; i < size; i++) {
					this.getGoodBlogs()
				}
				this.getCategories()
			},
			getCategories() {
				let url = this.$params.host + this.$params.action_categories
				this.$req.get(url, res => {
					this.categories = []
					url = this.$params.host + this.$params.action_category_count
					res.data.data.forEach(async (c) => {
						//发送请求
						let r = await this.$req.requestAsync(url + c.id)
						if (r.success) {
							let category = {
								id: c.id,
								name: c.name,
								count: r.data
							}
							this.categories.push(category)
						}
					})
				})
			},
			afterLogin() {
				this.isLogin = getApp().globalData.token.length > 0
				this.avatar = this.$params.host + app.globalData.avatar
				this.userName = app.globalData.userName
				this.nickName = app.globalData.nickName
				this.email = app.globalData.email
				this.type = app.globalData.type
				this.loadData()
			},
			clickLogout() {
				let url = this.$params.host + this.$params.action_logout
				let data = {
					token: app.globalData.token
				}
				this.$req.postQuery(url, data, res => {
					//console.log(res);
					uni.showToast({
						title: res.data.message
					});
					if (res.data.success) {
						app.globalData.avatar = "/static/default_user.png"
						app.globalData.nickName = ""
						app.globalData.userName = ""
						app.globalData.type = -1
						app.globalData.token = ""
						app.globalData.email = ""
						app.globalData.uid = ""
						this.isLogin = false
						current = 0
						this.goodCount = -1
						this.goodBlogs = []
						this.categories = []
						this.$refs.login.show()
					}
				})
			},
			"clickSwitch"(index) {
				let now = this.status[index].visible
				this.status[index].visible = !now
			},
			clickAdd() {
				this.$refs.shell_add.show()
			},
			inputGet(e) {
				newName = e.detail.value
			},
			confirmAdd() {
				if (newName.trim().length == 0) {
					uni.showToast({
						title: '请输入类别名称'
					});
					return
				}
				let url = this.$params.host + this.$params.action_category_add
				let data = {
					token: app.globalData.token,
					name: newName
				}
				this.$req.requestAsync(url, data, "POST").then(res => {
					//console.log(res);
					if (!res.success) {
						uni.showToast({
							title: res.message
						});
						return
					}
					let item = {
						id: res.data.id,
						name: res.data.name,
						count: 0
					}
					this.categories.push(item)
					newName = ""
				}).catch(err => {
					newName = ""
					console.log(err);
				})
			},
			clickUpdate(id, name) {
				this.oldValue = name
				updateId = id
				newName = name
				this.$refs.shell_update.show()
			},
			confirmUpdate() {
				if (newName.trim().length == 0) {
					uni.showToast({
						title: '请输入类别名称'
					});
					return
				}
				let url = this.$params.host + this.$params.action_category_put + updateId
				let data = {
					token: app.globalData.token,
					name: newName
				}
				this.$req.requestAsync(url, data, "PUT").then(res => {
					if (!res.success) {
						uni.showToast({
							title: res.message
						});
						return
					}
					let item = res.data
					this.categories.forEach(c => {
						if (c.id == item.id) {
							c.name = item.name
						}
					})
					this.$forceUpdate()
					newName = ""
				}).catch(err => {
					console.log(err);
					newName = ""
				})
			},
			clickGoBlog(id) {
				uni.navigateTo({
					url: '../detail/detail?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			clickDelete(id, name) {
				let url = this.$params.host + this.$params.action_category_del + id
				let data = {
					token: app.globalData.token
				}
				uni.showModal({
					title: '确认',
					content: '确认要删除' + name + '吗？',
					showCancel: true,
					cancelText: '再想想',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.$req.del(url, data, res => {
								if (res.success) {
									this.categories = this.categories.filter(c => c.id != id)
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none'
									});
								}
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style>
	@import url(./proflie.css);
</style>